<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOOK STORE</title>
    <link rel="stylesheet" href="css/General.css">
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<script src="js/jquery-3.5.1.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/bookstore.js"></script>
</head>
<body class="body">
<div class="header">
    <div class="logo">GoodBooks</div>
    <div class="tab_bar">
		<div class="btn-group header-menu">
			<button type="button" class="btn btn-default dropdown-toggle" 
					data-toggle="dropdown">
				menu <span class="caret"></span>
			</button>
			<ul class="dropdown-menu" style="top: 65%;" role="menu">
				<li><a href="#">功能</a></li>
				<li><a href="#">另一个功能</a></li>
				<li><a href="#">其他</a></li>
				<li class="divider"></li>
				<li><a href="#">个人信息设置</a></li>
			</ul>
		</div>
        <div class="header-item btn btn-default" id="login"><a href="#myModal" data-toggle="modal" >log in</a></div>
        <div class="header-item btn btn-default show-cart">
			<a href="#showCart"  data-toggle="modal">
				<img src="image/img_1.png" width="20px" height="22px">
				Cart(2)
			</a>
        </div>
    </div>
</div>
<div class="search">
	<div class="text-icon">~~~</div>
    <input type="text" class="search-input" placeholder="搜一搜 好书!啥都有">
    <button class="search_icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M21 21L16.6569 16.6569M16.6569 16.6569C18.1046 15.2091 19 13.2091 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19C13.2091 19 15.2091 18.1046 16.6569 16.6569Z" stroke="#242328" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </button>
</div>
<div class="content">
    <div class="book-item">
        <a href="DetailPage.html">
            <div class="book-image">
                <img src="image/img.png" width="100%">
            </div>
        </a>
        <div></div>
        <div class="book-info">
            <div>
                <a href="DetailPage.html" class="text-a">
                    <p class="book-name">The monocle guide to good business</p>
                </a>
                <p class="book-icon">Tyler Brûlé</p>
            </div>
            <div class="book-price">$ 65</div>
        </div>
    </div>
    <div class="book-item">
        <a href="DetailPage.html">
            <div class="book-image">
                <img src="image/img.png" width="100%">
            </div>
        </a>
        <div></div>
        <div class="book-info">
            <div>
                <a href="DetailPage.html"  class="text-a">
                    <p class="book-name">The monocle guide to good business</p>
                </a>
                <p class="book-icon">Tyler Brûlé</p>
            </div>
            <div class="book-price">$ 65</div>
        </div>
    </div>
    <div class="book-item">
        <a href="DetailPage.html" >
            <div class="book-image">
                <img src="image/img.png" width="100%">
            </div>
        </a>
        <div></div>
        <div class="book-info">
            <div>
                <a href="DetailPage.html" class="text-a">
                    <p class="book-name">The monocle guide to good business</p>
                </a>
                <p class="book-icon">Tyler Brûlé</p>
            </div>
            <div class="book-price">$ 65</div>
        </div>
    </div>
    <div class="book-item">
        <a href="DetailPage.html" >
            <div class="book-image">
                <img src="image/img.png" width="100%">
            </div>
        </a>
        <div></div>
        <div class="book-info">
            <div>
                <a href="DetailPage.html" class="text-a">
                    <p class="book-name">The monocle guide to good business</p>
                </a>
                <p class="book-icon">Tyler Brûlé</p>
            </div>
            <div class="book-price">$ 65</div>
        </div>
    </div>
</div>
<div class="page_split">
    <a href="#" class="text-a btn-previous"><img src="image/img_2.png" height="40px" width="40px"><div style="margin-top: 10px">Previous</div></a>
    <div class="page-num">
        Page 2 - 36
    </div>
    <a href="#" class="text-a btn-next" style="display: flex"><div style="margin-top: 10px">Next</div><img src="image/img_3.png" height="40px" width="40px"></a>
</div>
<div class="subscription">
    <div class="subscription-text">Join our and Subscribe our message</div>
	<input type="text" placeholder="添加评论" />
	<button class="subscribe">
		Subscribe
	</button>
</div>
<div class="footer">
	<div class="footer-box">
		<div class="footer-label">
			<p><a href="#">All books</a></p>
			<p><a href="#">Architecture</a></p>
			<p><a href="#">Arts & Entertainment</a></p>
			<p><a href="#">Bios & Memoirs</a></p>
			<p><a href="#">Business & Management</a></p>
			<p><a href="#">Design & Print</a></p>
		</div>
		<div class="footer-label">
			<p><a href="#">Economic & Politics</a></p>
			<p><a href="#">Fiction</a></p>
			<p><a href="#">Graphic Design</a></p>
			<p><a href="#">Health & Fitness</a></p>
			<p><a href="#">Business & Management</a></p>
			<p><a href="#">Design & Print</a></p>
		</div>
		<div class="footer-label">
			<p><a href="#">Non-Fiction</a></p>
			<p><a href="#">Philosophy</a></p>
			<p><a href="#">Photograhpy</a></p>
			<p><a href="#">Productivity</a></p>
			<p><a href="#">Psychology</a></p>
			<p><a href="#">Science & Nature</a></p>
		</div>
		<div class="footer-label">
			<p><a href="#">Self Improvement</a></p>
			<p><a href="#">Architecture</a></p>
			<p><a href="#">Technology</a></p>
		</div>
		<div class="footer-label">
			<p><a href="#">Ablout us</a></p>
			<p><a href="#">Contact</a></p>
			<p><a href="#">Support</a></p>
			<p><a href="#">Privacy</a></p>
			<p><a href="#">Privacy</a></p>
			<p><a href="#">Cookies</a></p>
		</div>
	</div>
	<div class="footer-author">
		<div class="logo">goodbooks</div>
		<div class="author">Designed by lu.</div>
	</div>
</div>
<!-- 登录模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 200px;">
    <div class="modal-dialog">
        <div class="modal-content" style="height: 360px;">
            <div class="modal-header" style="border: none;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <!-- <h4 class="modal-title" id="myModalLabel">login</h4> -->
            </div>
			<h3 class="login-title" style="text-align: center;">Login</h3>
            <!-- <div class="modal-body"></div> -->
			<form class="form-horizontal" role="form" style="margin-top: 30px;">
				<div class="form-group" style="display: flex; margin-left: 80px;">
					<label for="firstname" class="col-sm-2 control-label">用户名</label>
					<input type="text" class="form-control" id="firstname" placeholder="请输入用户名" style="width: 320px;">
				</div>
				<div class="form-group" style="display: flex; margin-left: 80px;">
					<label for="lastname" class="col-sm-2 control-label">密码</label>
					<input type="text" class="form-control" id="lastname" placeholder="请输入密码" style="width: 320px;">
				</div>
				<div class="form-group" style="margin-left: 65px;">
					<div class="col-sm-offset-2 col-sm-10">
						<div class="checkbox" style="display: flex;">
							<a class="forgot-pw" href="#">Forgot password ?</a>
							<a class="register" href="#register" data-toggle="modal" >Register now</a>
						</div>
					</div>
				</div>
				<div class="form-group">
					<input class="login-btn" type="submit" value="LOGIN"/>
				</div>
			</form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 注册模态框（Modal） -->
<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content" style="height: 500px;">
            <div class="modal-header" style="border: none;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <!-- <h4 class="modal-title" id="myModalLabel">login</h4> -->
            </div>
			<h3 class="login-title" style="text-align: center;">Create Account</h3>
            <!-- <div class="modal-body"></div> -->
			<form class="form-horizontal" role="form" style="margin-top: 30px;">
				<div class="form-group" style="display: flex; margin-left: 20px;">
					<label for="firstname" class="col-sm-3 control-label">用户名</label>
					<input type="text" class="form-control" id="" placeholder="请输入用户名" style="width: 320px;">
				</div>
				<div class="form-group" style="display: flex; margin-left: 20px;">
					<label for="lastname" class="col-sm-3 control-label">密码</label>
					<input type="text" class="form-control" placeholder="请输入密码" style="width: 320px;">
				</div>
				<div class="form-group" style="display: flex; margin-left: 20px;">
					<label for="lastname" class="col-sm-3 control-label">确认密码</label>
					<input type="text" class="form-control"  placeholder="请再次输入密码" style="width: 320px;">
				</div>
				<div class="form-group" style="display: flex; margin-left: 20px;">
					<label for="lastname" class="col-sm-3 control-label">性别</label>
					<label class="radio-inline">
						<input type="radio" name="sex" value="男" checked> 男
					</label>
					<label class="radio-inline">
						<input type="radio" name="sex" value="女"> 女
					</label>
				</div>
				<div class="form-group" style="display: flex; margin-left: 20px;">
					<label for="lastname" class="col-sm-3 control-label">邮箱</label>
					<input type="text" class="form-control" placeholder="请输入邮箱" style="width: 320px;">
				</div>
				<div class="form-group" style="margin-left: 65px;">
					<div class="col-sm-offset-2 col-sm-10">
						<div class="checkbox" style="display: flex;">
							<a class="register" href="#myModal" data-toggle="modal">Existing account, return to login</a>
						</div>
					</div>
				</div>
				<div class="form-group">
					<input class="login-btn" type="submit" value="LOGIN"/>
				</div>
			</form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 购物车显示框 -->
<div class="mantle">
	<div class="show-cart-box">
		<div class="show-cart-header">
			<div class="show-cart-icon"><</div>
			<div class="show-cart-img"><img src="image/shoppingbag.png">(4)</div>
		</div>
		<div class="show-cart-list">
			<div class="show-cart-item">
				<img src="image/img.png">
				<div style="width: 100%">
					<div class="show-cart-info">
						<p>The monocle guide to good business</p>
						<div class="show-cart-price">$65</div>
					</div>
					<div class="cart-btn-box">
						<div class="cart-plus">+</div>
						<div class="cart-num">2</div>
						<div class="cart-reduce">-</div>
					</div>
				</div>
			</div>
			<div class="show-cart-item">
				<img src="image/img.png">
				<div style="width: 100%">
					<div class="show-cart-info">
						<p>The monocle guide to good business</p>
						<div class="show-cart-price">$65</div>
					</div>
					<div class="cart-btn-box">
						<div class="cart-plus">+</div>
						<div class="cart-num">2</div>
						<div class="cart-reduce">-</div>
					</div>
				</div>
			</div>
			<div class="show-cart-item">
				<img src="image/img.png">
				<div style="width: 100%">
					<div class="show-cart-info">
						<p>The monocle guide to good business</p>
						<div class="show-cart-price">$65</div>
					</div>
					<div class="cart-btn-box">
						<div class="cart-plus">+</div>
						<div class="cart-num">2</div>
						<div class="cart-reduce">-</div>
					</div>
				</div>
			</div>
			<div class="show-cart-item">
				<img src="image/img.png">
				<div style="width: 100%">
					<div class="show-cart-info">
						<p>The monocle guide to good business</p>
						<div class="show-cart-price">$65</div>
					</div>
					<div class="cart-btn-box">
						<div class="cart-plus">+</div>
						<div class="cart-num">2</div>
						<div class="cart-reduce">-</div>
					</div>
				</div>
			</div>
			<div class="show-cart-item">
				<img src="image/img.png">
				<div style="width: 100%">
					<div class="show-cart-info">
						<p>The monocle guide to good business</p>
						<div class="show-cart-price">$65</div>
					</div>
					<div class="cart-btn-box">
						<div class="cart-plus">+</div>
						<div class="cart-num">2</div>
						<div class="cart-reduce">-</div>
					</div>
				</div>
			</div>
			<div class="show-cart-item">
				<img src="image/img.png">
				<div style="width: 100%">
					<div class="show-cart-info">
						<p>The monocle guide to good business</p>
						<div class="show-cart-price">$65</div>
					</div>
					<div class="cart-btn-box">
						<div class="cart-plus">+</div>
						<div class="cart-num">2</div>
						<div class="cart-reduce">-</div>
					</div>
				</div>
			</div>
			<div class="show-cart-item">
				<img src="image/img.png">
				<div style="width: 100%">
					<div class="show-cart-info">
						<p>The monocle guide to good business</p>
						<div class="show-cart-price">$65</div>
					</div>
					<div class="cart-btn-box">
						<div class="cart-plus">+</div>
						<div class="cart-num">2</div>
						<div class="cart-reduce">-</div>
					</div>
				</div>
			</div>
		</div>
		<div class="cart-total-amount">
			<div class="total-amount">
				<div class="subtotal">Subtotal</div>
				<div class="control-label-num">$ 325</div>
			</div>
			<div class="total-amount">
				<div class="shipping">Shipping</div>
				<div class="control-label-num">$ 16</div>
			</div>
			<div class="total-amount-btn">
				CHECKOUT
			</div>
		</div>
	</div>
</div>
</body>
</html>